<template>
    <div class="home-wrap">
        <div class="main-wrap">
            <el-container class="home-container">
                <el-aside class="home-aside" width="100%">
                    <el-table :data="tableData" stripe>
                        <el-table-column align="center" label="日期" prop="date" width="120px"/>
                        <el-table-column align="center" label="标题" prop="title"/>
                        <el-table-column align="center" label="操作" width="120px">
                            <template slot-scope="scope">
                                <el-button @click="openNews(scope.row.url)" size="mini" type="primary">查看</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-aside>
            </el-container>
        </div>
    </div>
</template>

<script>
    import * as api from "../api/news";

    export default {
        name: "Home",
        data() {
            return {
                tableData: []
            };
        },
        methods: {
            query() {
                api.get().then(res => {
                    this.tableData = res;
                });
            },
            openNews(url) {
                window.open(url, "_blank");
            }
        },
        created() {
            this.query();
        }
    };
</script>

<style scoped>
    .home-wrap {
        height: 100%;
        width: 100%;
    }

    .main-wrap {
        height: 100%;
        width: 100%;
        background-color: #fff;
        border: 1px solid #ddd;
        border-radius: 5px;
    }

    .home-container {
        height: 100%;
        width: 90%;
        margin: auto;
    }

    .home-aside {
        height: 100%;
    }

    .aside-container {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
        height: 200px;
        margin-top: 20px;
    }

    .aside-img {
        width: 100%;
    }

    .aside-title {
        color: #333;
        font-size: 18px;
    }

    .aside-content {
        font-size: 12px;
        color: #999;
    }
</style>
